<template>
    <l-layout :bottom="46">
        <template #bottom >
            <el-form style="padding-right:16px;" v-if="selectItem.f_IsNotPassword == 1" :model="formData" :rules="rules" size="mini"  ref="form" label-width="64px" >
                <el-col :span="24">
                    <el-form-item :label="$t('password')" prop="f_Password">
                        <el-input type="password" v-model="formData.f_Password"></el-input>
                    </el-form-item>
                </el-col>
            </el-form>
        </template>
        <div class="sign-type-list" >
            <div @click="handleChange(item)" :class="['sign-type-list--item',{'checked':selectValue == item.f_StampId }]"   v-for="(item,index) in signList" :key="index" >
                <div class="sign-type-list--imgdiv" >
                    <img class="sign-type-list--img" :src="`${apiUrl}system/annexesfile/${item.f_ImgFile}?token=${token}`" >
                    <div class="sign-type-list--checked" v-if="selectValue == item.f_StampId" >
                        <i class="el-icon-check" ></i>
                    </div>
                </div>
                <p class="sign-type-list--label" >{{$t(item.f_StampName)}}</p>
            </div>
        </div>
    </l-layout>
</template>
<script>
export default {
    data(){
        return {
            signList:[],
            selectValue:'',
            selectItem:{},

            formData:{
                f_Password:''
            },
            rules: {
                f_Password: [
                    { required: true, message: this.$t('请填写password'),trigger: 'blur' }
                ]
            },
        }
    },
    created () {
    },
    computed:{
    },
    methods:{
        resetForm(){
            this.selectValue = ''
            this.selectItem = {}
            this.signList = []
            this.$refs.form && this.$refs.form.resetFields()
            
        },
        async validateForm(){
            if(this.selectValue){
                if(this.selectItem.f_IsNotPassword == 1){
                    if(await this.$formValidateWraper(this.$refs.form)){
                        if(this.selectItem.f_Password == this.$md5(this.formData.f_Password)){
                            return true
                        }
                        else{
                            this.$message({
                                type: 'error',
                                message: this.$t('password错误!')
                            })
                        }
                    }
                }
                else{
                    return true
                }
            }
            else{
                this.$message({
                    type: 'error',
                    message: this.$t('please select签章!')
                })
            }

            return false
        },
        handleChange(item){
            this.selectItem = item
            this.selectValue = item.f_StampId
        },
        setForm(data){
            this.signList = this.$deepClone(data)
            if(this.signList.length == 1){
                this.selectItem = this.signList[0]
                this.selectValue = this.signList[0].f_StampId
            }
        },
        getForm(){
            return this.selectItem
        }
    }
}
</script>

<style lang="scss" scoped>
.sign-type-list{
    display: flex;
    flex-wrap: wrap;
    padding-top: 16px;
    overflow: auto;
    height: 100%;
    width: 100%;
    position: relative;
    box-sizing: border-box;

    &--item{
        width: 144px;
        margin:0 0 16px 16px;
    }

    &--imgdiv{
        width: 144px;
        height: 144px;
        border-radius: 2px;
        overflow: hidden;
        cursor: pointer;
        position: relative;
        border: 1px solid #f1f2f5;
        padding: 4px;
    }

    &--item.checked &--imgdiv{
        border: 1px solid #409eff;
    }

    &--img{
        width: 100%;
    }

    &--label{
        font-size: 12px;
        color: #606266;
        margin-top: 8px;
        text-align: center;
    }

    &--checked{
        border: 12px solid #409eff;
        border-left: 12px solid transparent;
        border-bottom: 12px solid transparent;
        border-top-right-radius: 2px;
        position: absolute;
        right: 3px;
        top: 3px;
        .el-icon-check{
            position: absolute;
            top: -10px;
            left: -2px;
            font-size: 12px;
            color: #fff;
        }
    }
}
</style>